<template>
	<view class="page_box">
		<u-navbar :is-back="false" title="" v-if="0" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			<view class="bg-img img padding  flex flex-direction justify-center">
				<text class="f40 text-bold text-white">登录</text>
				<view class="margin-top flex">
					<text class="text-white f26">还没有账号？</text>
					<navigator url="./register" hover-class="none" class="text-yellow">立即注册></navigator>
				</view>
			</view>

			<u-form :model="form" ref="uForm">
				<u-form-item :border-bottom="false" prop="tel">
					<view class="form-content padding">
						<view class="flex align-center">
							<image
								src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_tel.png"
								class="ico_tel"
							></image>
							<text class="margin-left-sm">手机</text>
						</view>
						<view class="u-border-bottom margin-top-sm padding-bottom flex justify-between align-center">
							<u-input
								v-model="form.tel"
								type="number"
								:clearable="false"
								:border="false"
								placeholder="请输入您的手机号"
								placeholder-style="color:#BDBDBD;font-size: 24rpx;"
								class="form-input"
							/>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" prop="verificationCd">
					<view class="form-content padding">
						<view class="flex align-center">
							<image
								src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_yzm.png"
								class="ico_yzm"
							></image>
							<text class="margin-left-sm">验证码</text>
						</view>
						<view class="u-border-bottom margin-top-sm padding-bottom flex justify-between align-center">
							<!-- <input placeholder="请输入手机验证码" placeholder-style="color:#BDBDBD;font-size: 24rpx;" class="form-input" /> -->
							<u-input
								v-model="form.verificationCd"
								type="number"
								:clearable="false"
								:border="false"
								placeholder="请输入手机验证码"
								placeholder-style="color:#BDBDBD;font-size: 24rpx;"
								class="form-input"
							/>
							<text class="text-yellow f26" @click="verificationCode()">{{ vercode }}</text>
						</view>
					</view>
				</u-form-item>
				<!-- <u-form-item :border-bottom="false" prop="invitationCd">
					<view class="form-content padding">
						<view class="flex align-center">
							<image
								src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_yqm.png"
								class="ico_yqm"
							></image>
							<text class="margin-left-sm">邀请码</text>
						</view>
						<view class="u-border-bottom margin-top-sm padding-bottom flex justify-between align-center">
							<u-input
								v-model="form.invitationCd"
								type="number"
								:clearable="false"
								:border="false"
								placeholder="请输入邀请码"
								placeholder-style="color:#BDBDBD;font-size: 24rpx;"
								class="form-input"
							/>
						</view>
					</view>
				</u-form-item> -->
				<view class="form-content padding flex justify-between">
					<navigator url="./login_pas" hover-class="none" class="f26">密码登录</navigator>
					<navigator url="./reset_password" hover-class="none" class="f26">忘记密码？</navigator>
				</view>
				<u-form-item :border-bottom="false">
					<view class="form-content padding">
						<button class="login-btn circle-btn" @click="loginBind">立即登录</button>
						<button class="wx-login-btn circle-btn">微信登录</button>
					</view>
				</u-form-item>
			</u-form>

			<!-- 隐私协议 -->
			<view class="privacy-bottom flex justify-center">
				<view class="flex align-center">
					<u-checkbox
						active-color="#F5AA15"
						shape="circle"
						label-size="22"
						size="26"
						v-model="checked"
						name="我已阅读并同意"
					>
						我已阅读并同意
					</u-checkbox>
					<navigator hover-class="none" class="text-yellow f22">《隐私协议》</navigator>
				</view>
			</view>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			page_title: '隐私协议',
			vercode: '获取验证码',
			form: {
				tel: '',
				verificationCd: '',
				// invitationCd: 'CF4589'
			},
			rules: {
				tel: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur']
					}
				],
				verificationCd: [
					{
						required: true,
						message: '请输入手机验证码',
						trigger: 'blur'
					}
				],
				// invitationCd: [
				// 	{
				// 		required: true,
				// 		message: '邀请码不能为空',
				// 		trigger: 'blur'
				// 	}
				// ]
			},
			checked: true
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onShow() {},
	onLoad(e) {},
	methods: {
		checkboxGroupChange(e) {},
		verificationCode() {
			if (this.vercode === '获取验证码' || this.vercode === '重新获取') {
				let timenum = 60;
				var timer = setInterval(() => {
					if (timenum === 0) {
						clearInterval(timer);
						this.vercode = '重新获取';
					} else {
						timenum--;
						this.vercode = timenum + 's';
					}
				}, 1000);
			}
		},
		loginBind() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (this.checked) {
						console.log(this.form);
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.switchTab({
								url: '../funBuy/funBuy'
							});
						}, 1000);
					} else {
						uni.showToast({
							title: '请同意并勾选隐私协议',
							icon: 'none'
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content_box {
	/deep/.u-form-item {
		padding: 0;
	}
	.img {
		width: 100vw;
		height: 362rpx;
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210615111249.png);
	}
	.form-content {
		padding-bottom: 0;
		width: 100%;
	}
	.ico_tel {
		width: 26rpx;
		height: 38rpx;
	}
	.form-input {
		padding-left: 46rpx;
	}
	.ico_yzm {
		width: 30rpx;
		height: 36rpx;
	}
	.ico_yj {
		width: 20rpx;
		height: 12rpx;
	}
	.ico_yqm {
		width: 32rpx;
		height: 32rpx;
	}
	button::after {
		border: 0;
	}
	.circle-btn {
		border-radius: 45rpx;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 90rpx;
	}
	.login-btn {
		background: #4a515b;
		color: #ffffff;
		margin-top: 50rpx;
	}
	.wx-login-btn {
		background: #dfdfdf;
		color: #4a515b;
		margin-top: 30rpx;
	}
	.privacy-bottom {
		margin: 50rpx 0 50rpx;
	}
	/deep/ .u-checkbox__label {
		margin-right: 0 !important;
	}
}
</style>
